import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/dist/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/dist/vite'
import Components from 'unplugin-vue-components/dist/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Inspect from 'vite-plugin-inspect'
import UnoCSS from 'unocss/vite'
import {viteMockServe} from 'vite-plugin-mock'

const pathSrc = fileURLToPath(new URL('./src', import.meta.url))

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue'],

            resolvers: [
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                })
            ],
            dts: fileURLToPath(new URL('./src/types/auto-imports.d.ts', import.meta.url))
        }),
        Components({
            resolvers: [
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    enabledCollections: ['ep'],
                })
            ],
            dts: fileURLToPath(new URL('./src/types/components.d.ts', import.meta.url))
        }),
        Icons({
            autoInstall: true,
        }),
        // vite-plugin-inspect 可以让开发者在浏览器端就可以看到vue文件编译后的代码、vue文件的相互依赖关系
        Inspect(), // npm i -D vite-plugin-inspect
        // UnoCSS
        UnoCSS({
            configFile: './src/uno.config.ts'
        }),
        viteMockServe({
            mockPath: "mock",
            enable: true,
            logger: true,
        }),
    ],
    resolve: {
        alias: {
            '@': pathSrc
        }
    }
})
